<template>
    <div>
      <el-table
        :data="currentData"
        style="width: 100%">
        <el-table-column
          label="菜品编号"
          prop='id'
          width="180">
        </el-table-column>
        <el-table-column
          label="菜品名称"
          prop='name'
          width="180">
        </el-table-column>
        <el-table-column
          label="菜品价格"
          prop='price'
          width="180">
        </el-table-column>
        <el-table-column
          label="菜品类型"
          prop='cpTypeEntity.name'
          width="180">
        </el-table-column>
        <el-table-column
          label="菜品图片"
          width="180">
          <template slot-scope="scope">
            <img :src="scope.row.imgSrc" style="width: 100px;height: 50px">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
            </el-button-group>
            <el-dialog title="编辑菜品" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="菜品编号" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="菜品名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" :label-width="formLabelWidth">
                  <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品类型" :label-width="formLabelWidth">
                  <el-select v-model="form.cpTypeEntity.name" placeholder="请选择角色">
                    <el-option
                      v-for="item in classifyTableData"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="菜品图片" :label-width="formLabelWidth">-->
<!--                  <template slot-scope="scope">-->
<!--                    <img :src="scope.row.imgSrc" style="width: 100px;height: 50px">-->
<!--                  </template>-->
<!--                </el-form-item>-->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEditDishes">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :total="pageNum"
        :page-size="3"
        :page-count="7"
        :current-page="currentPage"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
</template>

<script>
  import * as url from '../../../api/lypApi'
  import {mapActions,mapState} from 'vuex'
    export default {
        name: "dishesTable",
        methods:{
            saveEditDishes(){
                this.dialogFormVisible = false
                // console.log(this.form)
                this.$axios({
                    url:`/lypApi${url.UPDATEDISHES}`,
                    method:'post',
                    data:this.form
                }).then(res=>{
                    console.log(res)
                    this.getData()
                }).catch(err=>{
                    console.log(err)
                })
            },
            handleEdit(index, row) {
                // console.log(index, row);
                this.dialogFormVisible = true
                this.form.id=row.id
                this.form.name=row.name
                this.form.price=row.price
                this.form.cpTypeEntity.name=row.cpTypeEntity.name
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deleteData',row)
            },
            changePage(val){
                console.log(val)
                this.currentPage = val
            },
            ...mapActions(['getData']),
        },
        data(){
            return {
                currentPage:1,
                dialogFormVisible: false,
                form: {
                    name: '',
                    id:'',
                    price:'',
                    cpTypeEntity:{name:''}

                },
                formLabelWidth: '120px',
                classifyTableData:[],
            }
        },
        computed:{
            ...mapState({
                tableData:function (state) {
                    return state.lypStore.dishes.tableData
                }
            }),
            currentData(){
                let begin = (this.currentPage -1) * 3
                let end = (this.currentPage -1) * 3+3
                return this.tableData.slice(begin,end)
            },
            pageNum(){
                return this.tableData.length
            }
        },
        created() {
            this.getData()
            this.$axios({
                url:'/lypApi'+url.GETCLASSIFY,
                method:"post",
            }).then(res=>{
                console.log(res)
                this.classifyTableData=res.data.list
            }).catch(err=>{
                console.log(err)
            })

        },
        watch:{
            currentData(){
                console.log(this.currentData)
            },
        }

    }
</script>

<style scoped>

</style>
